<template>
    <div class="Details">
        <!-- 头部 -->
        <div id="mine">
            <van-sticky>
                <van-nav-bar class="van-nav-"
                title="订单详情"
                left-text="返回"
                left-arrow
                @click-left="onClickBack"
            />
            </van-sticky>
        </div>
        <div class="card">
            <van-card
            v-for="order in orderData.orderLines"
            :key="order.id"
            :num="order.number"
            :desc="order.product.description"
            :title="order.product.name"
            :thumb="order.product.photo"
            >
            <template #price>
              <span>{{'¥'+order.price+'.00'}}</span>
            </template>
            </van-card>
            <van-divider content-position="right">{{'总计：¥' + orderData.total + '.00'}}</van-divider>
        </div>
        <div class="content">
            <div style="margin:5px">服务地址：{{orderData.address.province}}{{orderData.address.city}}{{orderData.address.area}}{{orderData.address.address}}</div>
            <div style="margin:5px">联系方式：{{orderData.address.username}}({{orderData.address.telephone}})</div>
            <div style="margin:5px">下单时间：{{orderData.orderTime | dateFormat}}</div>
            <div style="margin:5px">服务时间：{{orderData.serviceTime | dateFormat}}</div>
            <div style="margin:5px"> 状 态：<van-tag color="#7232dd" plain>{{orderData.status}}</van-tag></div>
            <div style="margin:5px" v-if="orderData.comments[0] && orderData.comments[0].status=='通过'"> 评 价：
                <div v-for="od in orderData.comments" :key="od.id">
                    <span v-if="od && od.status=='通过'" style="margin:5px">{{od.content}}<br></span>
                </div>
            </div>
            <div></div>
           <div></div>
        </div>
        <div style="height:100px"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                orderData: this.$route.query.orderData,
            }
        },
        methods: {
            test() {
                // console.log(this.orderData.orderLines);
                console.log(this.orderData);
            },
            onClickBack() {
                this.$router.go(-1)
            },
        },
        created() {
            this.test()
        },
    }
</script>

<style scoped>
.content {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 8px;
  font-size: 15px;
  color: #999999;
}
#mine /deep/ .van-nav-bar__title{
  color: white !important;
  font-size: 1rem;
}
.van-card {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 10px;
  margin: 8px;
}
.van-nav- {
  background-image: linear-gradient(to right,  #74ebd5,#ACB6E5);
  color: aliceblue;
}
</style>